<template>
    <div>
         <el-form  :model="registForm" :rules="registryFormRules" ref="registryFormRef"  label-width="90px">
                <el-form-item label="用户名" prop="username"><el-input   v-model="registForm.username"   placeholder="请输入用户名"></el-input> </el-form-item>
                <el-form-item label="密码"   prop="password"><el-input   v-model="registForm.password"   placeholder="请输入密码"></el-input> </el-form-item>
                <el-form-item label="邮箱号" prop="usemail"><el-input    v-model="registForm.usemail"    placeholder="请输入邮箱号"></el-input> </el-form-item>
                <el-form-item label="手机号" prop="umobile"><el-input    v-model="registForm.umobile"   placeholder="请输入手机号"></el-input> </el-form-item>
                <el-form-item label="账户状态" prop="ustatus"><el-input  v-model="registForm.ustatus"  placeholder="请输入账户状态"></el-input> </el-form-item>
                <el-form-item label="删除状态" prop="udelete"><el-input  v-model="registForm.udelete"  placeholder="请输入删除状态"></el-input> </el-form-item>
                <el-form-item label="创建时间" prop="cretime"><el-input  v-model="registForm.cretime" placeholder="请输入创建时间"></el-input> </el-form-item>
                <el-form-item label="修改时间" prop="updtime"><el-input  v-model="registForm.updtime" placeholder="请输入修改时间"></el-input> </el-form-item>
                <el-form-item class="btns">
                    <el-button   @click="registry_form()" type="primary">注册</el-button>
                    <el-button   @click="registryFormRef()" type="info">重置</el-button>
                </el-form-item>
            </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
            registForm:{
                username:'',
                password:'',
                usemail:'',
                umobile:'',
                ustatus:'',
                udelete:'',
                cretime:'',
                updtime:''
            },
            registryFormRules:{
                 username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                    usemail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }
                ],
                    umobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    udelete: [
                    { required: true, message: '请输入删除状态 0、1', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ],
                    cretime: [
                    { required: true, message: '请输入创建时间', trigger: 'blur' },
                    { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    updtime: [
                    { required: true, message: '请输入修改时间', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    ustatus: [
                    { required: true, message: '请输入密码状态 0、1或2 ', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    methods:{
        registryFormRef(){
            this.$refs.registryFormRules.resetFields();
        },
        registry_form(){
            this.$refs.registryFormRef.validate(async valid=>{
                 var qs = require('qs')
                if(!valid) return;
                console.log(this.registForm);
               const{data:res} =  await this.$http.post("registry",qs.stringify(this.registForm));
               if(res.flag == "200"){
                   console.log(res.user);
                    window.sessionStorage.setItem("user",res.user);//将后台user数据存储到session中
               }
            });
        }
       
    }
}
</script>
<style lang="less" scoped>
div{
   height: 100%;
   width: 100%;
   position: relative;
   .el-form{
       width: 100%;
      position: absolute;
      transform:translate(22%,0%);
       top: 50px;
        .el-input{
            position: relative;
            width: 50%;
        }
        .btns{
            position: relative;
            text-align: center;
            transform:translate(-6%,0%);
        }
   }
   
}
</style>